<script lang="ts" setup>
import { ref } from 'vue'

const width = ref(100)
const handleAdd = () => {
    width.value += 20
}

const showTitle = ref<boolean>(true)
const toggleTitle = () => {
    showTitle.value = !showTitle.value
}
</script>
<template>
    <div class="transition-box">
        <span>通过transition实现过渡动画</span>
        <div class="box" :style="{width: width + 'px'}">box</div>
        <button @click="handleAdd">点击</button>
    </div>
    <div class="animation-box">
        <div>通过animation+keyframe组合实现动画</div>
        <div class="box1"></div>
    </div>
    <div class="vue3-animation-box">
        <div>vue3中实现动画的方式</div>
        <button @click="toggleTitle()">显示隐藏</button>

        <transition name="fade">
            <h1 class="box2" v-show="showTitle">hello transition</h1>
        </transition>
    </div>
</template>
<style scpoed>
.transition-box {
    padding: 30px;
    text-align: left;
}
.transition-box .box {
    height: 50px;
    background: DarkCyan;
    color: #fff;
    text-align: center;
    transition: width .5s linear
}
.animation-box {
    padding: 30px;
    text-align: left;
}
.animation-box .box1 {
    width:50px;
    height: 50px;
    background: LavenderBlush;
    position: relative;
    animation: move 3s linear infinite;
}
@keyframes move {
 0% { left: 0px }
 50% { left: 200px }
 100% { left: 0px }
}

.vue3-animation-box {
    padding: 30px;
    text-align: left;
}
.vue3-animation-box .box2 {
    width: 100%;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s linear
}
.fade-enter-from, .fade-leave-to {
    opacity: 0
}
</style>